<template>
  <div>
    <el-table :data="userList"
              ref="userTable"
              style="width: 100%"
              row-key="id">
      <el-table-column :prop="index"
                       :label="item"
                       v-for="(item, index) in tableColumList"
                       :key="index">
        <template slot-scope="scope">
          <div v-if="item == `头像`">
            <el-image :prop="index.avatarUrl"
                      :src="scope.row.avatarUrl"
                      :no-cache="true">
              <div slot="error"
                   class="image-slot">
                <i>暂无头像</i>
              </div>
            </el-image>
          </div>
          <div v-else-if="item == `状态`">
            <el-tag v-if="scope.row.customerLoginBean.status == 1"
                    type="success">正常</el-tag>
            <el-tag v-else
                    type="danger">
              禁用
            </el-tag>
          </div>
          <div v-else-if="item == `性别`">
            <i v-if="scope.row.customerSex  == 1 ">
              男
            </i>
            <i v-else>
              女
            </i>
          </div>
          <div v-else-if="item ==`操作`">
            <el-button v-if="scope.row.customerLoginBean.status == 1"
                       type="danger"
                       icon="el-icon-delete"
                       @click="disableUser(scope.row)"
                       circle> </el-button>
            <el-button v-if="scope.row.customerLoginBean.status != 1 "
                       type="primary"
                       icon="el-icon-check"
                       circle
                       @click="enableUser(scope.row)">
            </el-button>
          </div>
          <div v-else>
            {{scope.row[index]}}
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination :total="this.total"
                   :current-page="this.currentPageNum"
                   :page-sizes="[1,2]"
                   @current-change="handleCurrentChange"
                   layout="total,sizes ,prev , pager , next"
                   @size-change="handleSizeChange">

    </el-pagination>
  </div>
</template>

<script>
export default {
  name: 'UserList',
  components: {},
  data() {
    return {
      // 	前端返回的用户列表
      userList: [],
      // 分页需要的总数
      total: 0,
      // 分页需要的一页多少条
      currentPageSize: 1,
      //分页页码
      currentPageNum: 1,
      tableColumList: {
        id: "编号",
        avatarUrl: "头像",
        customerName: "用户名",
        mobilePhone: "手机号",
        customerEmail: "邮箱",
        customerSex: "性别",
        registerTime: "注册时间",
        status: "状态",
        tool: "操作"
      }
    }
  },




  created() { },
  methods: {
    //初始化用户列表
    getUserListForPage(currentPageNum, currentPageSize) {
      this.getRequest("/customerInfo/api/getUserList", {
        pageNum: currentPageNum,
        pageSize: currentPageSize
      }).then(res => {
        if (res.code === 200) {
          console.log(res);
          this.userList = res.data;
          this.total = res.total;
        }
      });
    },

    // 分页钩子函数 页码变化
    handleCurrentChange(val) {
      this.currentPageNum = val;
      this.getUserListForPage(this.currentPageNum, this.currentPageSize);
    },
    //分页钩子函数 条数变化
    handleSizeChange(val) {
      this.currentPageSize = val;
      this.getUserListForPage(this.currentPageNum, this.currentPageSize);
    },
    // 禁用账户
    disableUser(row) {
      console.log(row.customerLoginBean.status);
      this.$confirm("确认禁用该用户吗", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        showCancelButton: true
      }).then(() => {
        this.putRequest("/customerInfo/api/disableUser/" + row.id).then(res => {
          if (res.code === 200 && res.msg === "success") {
            this.$message({
              type: "success",
              message: "禁用成功"
            });
            this.getUserListForPage(this.currentPageNum, this.currentPageSize);
          } else {
            this.$message({
              type: "error",
              message: "出错了"
            });
          }
        });
      }).catch(() => {
        this.$message({
          type: "info",
          message: "已取消"
        });
      });

    },
    //启用账户
    enableUser(row) {
      this.$confirm("确认启用该用户吗", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        showCancelButton: true
      }).then(() => {
        this.putRequest("/customerInfo/api/enableUser/" + row.id).then(res => {
          if (res.code === 200 && res.msg === "success") {
            this.$message({
              type: "success",
              message: "启用成功"
            });
            this.getUserListForPage(this.currentPageNum, this.currentPageSize);
          } else {
            this.$message({
              type: "error",
              message: "出错了"
            });
          }
        });
      }).catch(() => {
        this.$message({
          type: "info",
          message: "已取消"
        });
      })
        ;
    }

  },

  mounted() {
    this.getUserListForPage(this.currentPageNum, this.currentPageSize);
    
  }
}
</script>

<style scoped>
</style>